const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const resolve = (dir) => {
  return path.resolve(__dirname, '../', dir)
}
module.exports = {
  mode: 'development',
  entry: {
    app: resolve('src/main.js'),
  },
  output: {
    path: resolve('dist'),
    filename: '[name].js'
  },
  plugins: [
    new CleanWebpackPlugin(),

    new CopyWebpackPlugin({
      patterns: [
        {
          from: resolve('public/favicon.ico'),
          to: resolve('dist/')
        } 
      ]
    }),

    new HTMLWebpackPlugin({
      title: 'hello webpack', 
      filename: 'index.html',
      template: resolve('public/index.html'),
      inject: true,
      minify: {
        collapseWhitespace: true, 
        removeAttributeQuotes: true, 
        removeComments: true
      }
    }),

    new VueLoaderPlugin() // 解析vue文件必须的

  ],
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader' // 打包查看错误，安装相关依赖并且配置
      }
    ]
  },
  devServer: { // 项目上线时此代码无效
    contentBase: resolve('dist'),
    host: '127.0.0.1',
    port: 3333,
    proxy: {
      // key: value
      '/api': {
        target: '',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}